<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchForm" class="compact-form">
      <el-form-item label="项目名称">
        <el-select v-model="searchForm.name" placeholder="请选择项目名称" clearable size="small" style="width: 180px">
          <el-option v-for="item in projectOptions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="网关状态">
        <el-select v-model="searchForm.gatewayStatus" placeholder="请选择网关状态" clearable size="small" style="width: 120px">
          <el-option label="正常" value="normal" />
          <el-option label="异常" value="abnormal" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
        <el-button size="small" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <vxe-table border show-overflow :data="tableData" height="600" class="compact-table">
      <vxe-column type="seq" title="序号" width="60" align="center" />
      <vxe-column field="name" title="项目名称" />
      <vxe-column field="deviceAddress" title="设备地址" />
      <vxe-column field="gatewayAddress" title="网关地址" />
      <vxe-column field="frequency" title="采集频率" />
      <vxe-column field="remark" title="备注" />
      <vxe-column field="createTime" title="创建时间" width="160" />
      <vxe-column field="createUser" title="创建人" width="120" />
      <vxe-column
        field="gatewayStatus"
        title="网关状态"
        width="120"
        :cell-class-name="getGatewayStatusClass"
      />
      <vxe-column title="操作" width="140" fixed="right" align="center">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>

    <!-- 编辑弹框 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑项目' : '新增项目'" width="40%" :before-close="handleDialogClose">
      <div class="compact-dialog">
        <el-form ref="formRef" :model="formData"  label-width="80px" label-position="top">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目名称" prop="name">
                <el-select v-model="formData.name" placeholder="选择项目名称" size="small">
                  <el-option v-for="item in projectOptions" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备地址" prop="deviceAddress">
                <el-input v-model="formData.deviceAddress" placeholder="请输入设备地址" size="small" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="网关地址" prop="gatewayAddress">
                <el-input v-model="formData.gatewayAddress" placeholder="请输入网关地址" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采集频率" prop="frequency">
                <el-input v-model="formData.frequency" placeholder="请输入采集频率" size="small" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="网关状态" prop="gatewayStatus">
                <el-select v-model="formData.gatewayStatus" placeholder="选择网关状态" size="small">
                  <el-option label="正常" value="normal" />
                  <el-option label="异常" value="abnormal" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark" placeholder="请输入备注信息" size="small" />
              </el-form-item>
            </el-col>
          </el-row>

          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" size="small" @click="handleSubmit">保存</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  name: 'ProjectManagement',
  data() {
    return {
      searchForm: reactive({
        name: '',
        gatewayStatus: ''
      }),
      formData: reactive({
        name: '',
        deviceAddress: '',
        gatewayAddress: '',
        frequency: '',
        gatewayStatus: 'normal',
        remark: ''
      }),
      dialogVisible: false,
      isEdit: false,
      tableData: [
        {
          name: '太化',
          deviceAddress: '设备1',
          gatewayAddress: '192.168.1.1',
          frequency: '30秒',
          remark: '备注信息',
          createTime: '2025-06-19 09:00',
          createUser: '小洪',
          gatewayStatus: 'normal'
        },
        {
          name: '中天',
          deviceAddress: '设备2',
          gatewayAddress: '192.168.1.2',
          frequency: '20秒',
          remark: '备注信息2',
          createTime: '2025-06-19 09:10',
          createUser: '小洪',
          gatewayStatus: 'abnormal'
        }
      ],
      projectOptions: ['太化', '中天', '淮钢', '镔鑫', '东特', '三宝', '酒钢', '淮钢2期'],
    };
  },
  methods: {
    handleSearch() {
      console.log('搜索数据', this.searchForm);
    },
    handleAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.formData = { name: '', deviceAddress: '', gatewayAddress: '', frequency: '', gatewayStatus: 'normal', remark: '' };
    },
    handleEdit(row: any) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.formData = { ...row };
    },
    handleDelete(row: any) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    },
    handleSubmit() {
      if (this.isEdit) {
        // 编辑提交
        const index = this.tableData.findIndex(item => item.deviceAddress === this.formData.deviceAddress);
        if (index !== -1) {
          this.tableData[index] = { ...this.formData };
        }
      } else {
        // 新增提交
        this.tableData.push({ ...this.formData });
      }
      this.dialogVisible = false;
    },
    handleDialogClose(done: Function) {
      done();
      this.formData = { name: '', deviceAddress: '', gatewayAddress: '', frequency: '', gatewayStatus: 'normal', remark: '' };
    },
    getGatewayStatusClass({ row }: { row: any }) {
      return row.gatewayStatus === 'normal' ? 'status-normal' : 'status-abnormal';
    }
  }
});
</script>

<style scoped>
.status-normal {
  background-color: green;
  color: white;
}
.status-abnormal {
  background-color: red;
  color: white;
}
</style>
